<script setup lang="ts">
defineProps<{
  list: { name: string }[];
}>();

defineEmits<{
  command: [any, number];
}>();

const show = ref(false);
</script>

<template>
  <div class="relative">
    <div @mouseenter="show = true" @mouseleave="show = false">
      <slot />
    </div>

    <ol
      class="absolute top-full left-50% w-134px py-5 text-center bg-white rounded-xl -translate-x-1/2 hover:block shadow-2xl"
      :class="show ? 'block' : 'hidden'"
    >
      <li
        v-for="(item, index) in list"
        :key="index"
        class="relative py-3 text-lg text-black hover:bg-#7948ea/30 cursor-pointer"
        @click="$emit('command', item, index)"
      >
        <slot name="item" :data="item">
          {{ item.name }}
        </slot>
      </li>
    </ol>
  </div>
</template>
